<template>
	<div class="test-virtuallist-container">
		<fs-virtual-list
			:data-source="state.dataSource"
			:item-height="100"
			:loading="state.loading"
			loading-text="拼命加载中"
			loading-bg="rgba(255, 255, 255, 0.8)"
			@getMoreData="handleGetMoreData"
		>
			<template #item="{ item }">
				<div class="list-item">{{ item.id }}</div>
			</template>
		</fs-virtual-list>
	</div>
</template>

<script setup lang="ts">
	import FsVirtualList from '../components/FsVirtualList.vue'

	const state = reactive({
		dataSource: [] as Array<{ id: number }>,
		loading: false
	})

	onMounted(() => {
		addData()
	})

	const handleGetMoreData = () => {
		addData()
	}

	const addData = () => {
		if (state.loading) return
		state.loading = true
		setTimeout(() => {
			for (let i = 0; i < 10; i++) {
				const len = state.dataSource.length
				state.dataSource.push({
					id: len + 1
				})
			}
			state.loading = false
		}, 2000)
	}
</script>

<style scoped lang="less">
	.test-virtuallist-container {
		width: 100%;
		height: 100%;
		.list-item {
			width: 100%;
			height: 100px;
			box-sizing: border-box;
			border: 1px solid #000;
			text-align: center;
			line-height: 100px;
			font-size: 20px;
		}
	}
</style>
